<template>
<ul class="comList">
  <li>
    <div class="info">
      <img src="../assets/lis.jpg" >
      <h2>误吸仙气的马乐被告知世界正在崩溃气的马乐被告知世界正在气的马乐被告知世界正在边缘…</h2>
      <span class="s s1"></span>
      <p class="t">00:38:42</p>
      <a class="play" href=""></a>
    </div>
    <div class="tit">
      <p><i></i>大胖孟园胖孟胖孟胖孟胖孟园</p>
      <p><i></i>551次</p>
      <p><i></i>2天前</p>
    </div>
  </li>
</ul>
</template>

<script>

export default {

}
</script>

<style lang='less'>
  .comList li {
   background: #f6f6f6; border-radius: 8px; margin-bottom:12px; overflow: hidden;
   .info {
     position: relative;
     img { border-radius: 6px;}
     h2 { position: absolute; left: 10px; top:10px; width: 88%; color: #fff; font-size:16px; font-weight: normal;}
     .s { position: absolute; right: 6px; top:6px;width: 26px; height: 26px; background-size:100% 100%; }
     .s.s1 { background: url(../assets/save.png); background-size:100% 100%; }
     .s.s2 { background: url(../assets/save1.png); background-size:100% 100%;  }
     .t{ position: absolute; right: 10px; bottom:10px; color: #fff; background: rgba(0,0,0,0.5); padding: 3px 10px; border-radius: 10px;}
     a { position: absolute; top:50%; left: 50%; margin-left:-32px; margin-top:-40px; background: url(../assets/play.png); width: 65px; height:65px;background-size:100% 100%; }
   }
   .tit {
     display: flex; justify-content: space-between; line-height: 2.4em; padding: 8px 10px; overflow: hidden;
     p {
      font-size:12px;
      i { display: inline-block; width: 16px; height: 16px; margin-right: 3px; position:relative; top:2px; }
     }
     p:nth-child(1) {
       width: 60%; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
       i {  background: url(../assets/up.png) no-repeat; background-size:100% 100%; }
      }
     p:nth-child(2) {
      color:#938e9d;
      i { background: url(../assets/num.png) no-repeat;background-size:100% 100%; }
    }
     p:nth-child(3) {
      color:#938e9d;
      i { background: url(../assets/time.png) no-repeat;background-size:100% 100%; }
    }
   }
 }
 </style>
